<template>
  <div>
    <lunbotu />
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Index</th>
          <th>Brand Name</th>
          <th>Create Time</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in brandList" :key="index">
          <td>{{index + 1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime | dateformat("YYYY赵MM春DD明 HH:mm:ss")}}</td>
          <td>
            <button class="btn btn-danger" @click="del(item._id)">删除</button>
            <router-link tag="button" :to="'/detail/' + item._id">查看详情</router-link>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
</template>

<script>
//需要引入axios
import axios from "axios";

// 需要用到dateformatter过滤器，所以先导入
import dateformat from "@/filters/dateformatter.js";

import lunbotu from "../common/lunbotu.vue"

export default {
  data() {
    return {
      brandList: []
    };
  },
  created() {
    //发送ajax请求获取数据
    this.getData();
  },
  methods: {
    getData() {
      axios({
        url: "http://localhost:9999/api/getprodlist"
      }).then(res => {
        this.brandList = res.data.data;
      });
    },
    del(id) {
      axios({
        url: "http://localhost:9999/api/delproduct/" + id
      }).then(res => {
        this.getData();
      });
    }
  },
  filters: {
    dateformat
  },
  components: {
    lunbotu
  }
};
</script>

<style scoped>
.table {
  width: 100%;
  border: 1px solid #666;
}

td,
th {
  border: 1px solid #666;
}
</style>
